<template>
  <el-image :src="headerImg" style="margin-top: -60px; z-index: -1"/>
  <div style="margin: 16px 120px">
    <el-row :gutter="23" align="middle">
      <el-col :span="11">
        <div style="margin-bottom: 16px">
          <h3>示例</h3>
          <div>
            <el-pagination
                background
                layout="pager"
                :total="7"
                :page-size="1"
                :current-page="exampleCodeIndex"
                @current-change="(val: number) => {exampleCodeIndex = val}"
            />
          </div>
        </div>
        <el-card>
          <CodeView :code="exampleCodeList[exampleCodeIndex - 1]"/>
        </el-card>
      </el-col>
      <el-col :span="1">
        <el-image :src="arrowRight" @click="toAnalysis"/>
      </el-col>
      <el-col :span="11">
        <ResultView :result="result"/>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import CodeView from "@/components/CodeView.vue";
import arrowRight from "@/assets/arrow-right.svg"
import headerImg from "@/assets/header.png"
import {onMounted, reactive, ref} from "vue";
import ResultView from "@/components/ResultView.vue";
import axios from "axios";
import baseUrl from "@/url/baseUrl";
import {ElMessage} from "element-plus";

interface Result {
  hasError: boolean,
  probability: number,
  origin: string,
  fix: string
}

const toAnalysis = () => {
  //注意，这里使用的是index模拟去后端分析
  axios.post(
      `${baseUrl.service}/analysis?index=${exampleCodeIndex.value - 1}`
  ).then((res) => {
    if (res.status != 200) {
      ElMessage("分析失败")
    } else {
      result.value = res.data
    }
  }).catch((err)=> {
    ElMessage("分析失败" + err)
  })
}

const result = ref<Result | null>(null)

const exampleCodeIndex = ref(1)

const exampleCodeList = [
    "int GetMaxcommonDivisor(int m,int n){\n" +
    "    int r;\n" +
    "    while(n!=0){\n" +
    "        r=m%n;\n" +
    "        m=n;\n" +
    "        n=r;\n" +
    "    }\n" +
    "    return n;\n" +
    "}\n",
    "  // 更新操作时提供“比较并替换”的作用\n" +
    "  private static final Unsafe unsafe = Unsafe.getUnsafe();\n" +
    "\n" +
    "  private static final long valueOffset;\n" +
    "\n" +
    "  static {\n" +
    "      try{\n" +
    "          valueOffset = unsafe.objectFieldOffset(AutomicInteger.class.getDeclaredField(\"value\"));\n" +
    "      }catch(Exception ex){\n" +
    "          throw new Error(ex);\n" +
    "      }\n" +
    "  }\n" +
    "\n" +
    "  private volatile int value;",
    "c",
    "d",
    "e",
    "f",
    "g",
    "h"
]

</script>

<style scoped lang="sass">
::v-deep .el-pagination li
  border-radius: 16px
</style>